<template>
  <el-aside width="200px" class="image-aside" v-loading="loading">
    <div class="top">
      <image-aside-list
        :active="selectedIndex === index"
        @edit="handleEdit"
        @delete="handleDelete(index)"
        @click="handleClick(item, index)"
        v-for="(item, index) in list"
        :key="index"
        >{{ item.name }}</image-aside-list
      >
    </div>
    <div class="bottom">
      <el-pagination background layout="prev,next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"></el-pagination>
    </div>
  </el-aside>

  <form-drawer ref="formDrawerRef" :closeOnClickModal="true" @submit="handleSubmit">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" :inline="false">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序序号" prop="order">
        <el-input-number v-model="form.order" :min="0" :max="1000"></el-input-number>
      </el-form-item>
    </el-form>
  </form-drawer>
</template>

<script setup>
import { ref, reactive } from 'vue'
import ImageAsideList from '~/components/ImageAsideList.vue'
import { getImageClassList } from '~/api/image_class'
import FormDrawer from './FormDrawer.vue'

// 声明事件
const emits = defineEmits(['onClickListItem'])

// #region 变量
const formDrawerRef = ref(null)
const formRef = ref(null)
const selectedIndex = ref(null)
const loading = ref(false)
const list = ref([])

// 分页相关
const currentPage = ref(1) // 当前页码
const total = ref(6) // 总共条目数
const limit = ref(5) // 每页显示的条目数

// 抽屉中的表单
const form = reactive({
  name: '',
  order: 50
})

const rules = {
  name: [
    {
      required: true,
      message: '分类名称是必填项',
      trigger: 'blur'
    }
  ]
}
// #endregion

const handleEdit = () => formDrawerRef.value.open()
const handleDelete = (index) => console.log(`点击了${index}的删除按钮`)

const getData = (p = null) => {
  if (typeof p === 'number') currentPage.value = p
  loading.value = true
  // 查询指定页码的数据
  getImageClassList(currentPage.value)
    .then((res) => {
      list.value = res.list
      setDefaultSelected()
    })
    .finally(() => (loading.value = false))
}

getData()

const setDefaultSelected = () => {
  if (list.value && list.value.length > 0) {
    selectedIndex.value = 0
    emits('onClickListItem',list.value[0])
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (!valid) return
    console.log('开始提交')
  })
}

const handleCreate = () => {
  formDrawerRef.value.open()
}

const handleClick = (item, index) => {
  selectedIndex.value = index
  emits('onClickListItem', item, index)
}

defineExpose({
  handleCreate
})
</script>
<style scoped>
.image-aside {
  border-right: 1px solid #eee;
  position: relative;
}

.image-aside .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-aside .bottom {
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}
</style>
